<template>
    <div class="all">
        <layout class="main">
            <Row class="t">
                <Col class="t_l" span="8">这是啥？</Col>
                <Col class="t_m" span="6">
                    <Select style="width:200px">
                        <Option value="beijing">bug?</Option>
                        <Option value="shanghai" disabled>绿色</Option>
                        <Option value="shenzhen">红色警戒</Option>
                    </Select>
                </Col>
                <Col class="t_r" span="6">
                    <Col span="18">
                        <Input v-model="value14" placeholder="请输入..." clearable style="width: 100%" />
                    </Col>
                    <Col class="search" span="5">search</Col>
                </Col>
            </Row>
            <Row class="b">
                <Col span="18" class="result">
                    <List item-layout="vertical">
                        <ListItem v-for="item in data" :key="item.title">
                            <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description" />
                            {{ item.content }}
                            <template slot="action">
                                <li>
                                    <Icon type="ios-star-outline" /> 123
                                </li>
                                <li>
                                    <Icon type="ios-thumbs-up-outline" /> 234
                                </li>
                                <li>
                                    <Icon type="ios-chatbubbles-outline" /> 345
                                </li>
                            </template>
                            <template slot="extra">
                                <img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 280px">
                            </template>
                        </ListItem>
                    </List>
                </Col>
                <Col span="6" class="related">
                    <Tabs type="card">
                        <TabPane label="相关一">
                            <Card>
                                <p slot="title">The standard card</p>
                                <p>Content of card</p>
                                <p>Content of card</p>
                                <p>Content of card</p>
                            </Card>
                        </TabPane>
                        <TabPane label="相关二">
                            <Card>
                                <p slot="title">The standard card</p>
                                <p>Content of card</p>
                                <p>Content of card</p>
                                <p>Content of card</p>
                            </Card>
                        </TabPane>
                        <TabPane label="相关三">
                            <Card>
                                <p slot="title">The standard card</p>
                                <p>Content of card</p>
                                <p>Content of card</p>
                                <p>Content of card</p>
                            </Card>
                        </TabPane>
                    </Tabs>
                </Col>
            </Row>
        </layout>
    </div>
</template>

<script>
    import E from "wangeditor"

    export default {
        name: "PersonalCenter",
        data: function () {
            return {
                editor: "",
                editorContent: ""
            }
        },
        mounted: function () {
            this.editor = new E(this.$refs.editorElem);
            this.editor.customConfig.onchange = html => {
                this.editorContent = html;
                this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
            };
            this.editor.customConfig.menus = [
                // 菜单配置
                'head', // 标题
                'bold', // 粗体
                'fontSize', // 字号
                'fontName', // 字体
                'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                'foreColor', // 文字颜色
                'backColor', // 背景颜色
                'link', // 插入链接
                'list', // 列表
                'justify', // 对齐方式
                'quote', // 引用
                'emoticon', // 表情
                'image', // 插入图片
                'table', // 表格
                'code', // 插入代码
                'undo', // 撤销
                'redo' // 重复
            ];
            this.editor.create(); // 创建富文本实例
        },
        Input:function () {
            return {
                value14: 'Hello World'
            }
        },
        data () {
            return {
                data: [
                    {
                        title: 'This is title 1',
                        description: 'This is description, this is description, this is description.',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                        content: 'This is the content, this is the content, this is the content, this is the content.'
                    },
                    {
                        title: 'This is title 2',
                        description: 'This is description, this is description, this is description.',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                        content: 'This is the content, this is the content, this is the content, this is the content.'
                    },
                    {
                        title: 'This is title 3',
                        description: 'This is description, this is description, this is description.',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                        content: 'This is the content, this is the content, this is the content, this is the content.'
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .all{
        width: 70%;
        margin: 0 auto;
    }
    .main .t {
        font-size: 20px;
        border: #2c3e50 solid 1px;
        padding: 5px;
    }
    .main .t .t_l{
        border: #2c3e50 solid 1px;
    }
    .main .t_m{
        margin-left: 10%;
        height: 36px;
        outline: none;
    }
    .main .t .t_r{
    }
    .main .t .t_r .search{
        cursor:pointer;
        text-align: center;
        border: #2c3e50 solid 1px;
        border-radius: 5px;
        margin-left: 10px;
    }
    .main .result div {
        width: 95%;
        padding: 10px;
        font-size: 18px;
        line-height: 25px;
        margin: 20px;
        border: #2c3e50 solid 1px;
    }
    .main .related{
        min-height: 500px;
        padding: 10px;
        font-size: 18px;
        margin: 20px 0 0 -20px;
        line-height: 30px;
        border: #2c3e50 solid 1px;
    }
</style>